<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="description"
      content="A javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars."
    />
    <meta name="theme-color" content="#36befd" />
    <meta name="msapplication-TileColor" content="#36befd" />
    <meta name="msapplication-navbutton-color" content="#36befd" />
    <meta name="application-name" content="Overlay Scrollbars" />
    <meta name="msapplication-tooltip" content="Overlay Scrollbars" />
    <meta name="apple-mobile-web-app-title" content="Overlay Scrollbars" />
    <meta
      name="viewport"
      content="width=800, initial-scale=1.0, user-scalable=yes"
    />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <title>
      Overlay Scrollbars - Javascript scrollbar plugin which hides the native
      scrollbars and provides custom styleable overlay scrollbars.
    </title>

    <!-- Google Scheme Markup as JSON-LD -->
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "SoftwareSourceCode",
        "url": "https://kingsora.github.io/OverlayScrollbars",
        "name": "Overlay Scrollbars",
        "description": "A javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars, but keeps the native functionality and feeling.",
        "disambiguatingDescription": "javascript overlay scrollbars plugin",
        "license": "https://en.wikipedia.org/wiki/MIT_License",
        "keywords": "js,javascript,OverlayScrollbars,overlay,scrollbars,custom,scrollbar,plugin,jquery,scrollbars,polyfill",
        "isAccessibleForFree": true,
        "image": "https://kingsora.github.io/OverlayScrollbars/img/logo.png",
        "codeRepository": "https://github.com/KingSora/OverlayScrollbars",
        "programmingLanguage": {
          "@type": "ComputerLanguage",
          "name": "javascript",
          "alternateName": "js"
        }
      }
    </script>

    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />

    <!-- 3rd Party CSS -->
    <link
      type="text/css"
      href="./_framework/plugins/css/highlightjs/sora.css"
      rel="stylesheet"
    />
    <link
      type="text/css"
      href="./_framework/plugins/css/codemirror/codemirror.css"
      rel="stylesheet"
    />
    <link
      type="text/css"
      href="./_framework/plugins/css/tippy/tippy.css"
      rel="stylesheet"
    />

    <!-- 3rd Party JS -->
    <script
      type="text/javascript"
      src="./_framework/plugins/js/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./_framework/plugins/js/jquery.raf.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./_framework/plugins/js/jquery.easing.js"
    ></script>
    <script
      type="text/javascript"
      src="./_framework/plugins/js/day.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./_framework/plugins/js/tippy.min.js"
    ></script>
    <!--[if gte IE 9]><!-->
    <script
      type="text/javascript"
      src="./_framework/plugins/js/highlight.min.js"
    ></script>
    <!--<![endif]-->
    <script
      type="text/javascript"
      src="./_framework/plugins/js/signals.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./_framework/plugins/js/hasher.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./_framework/plugins/js/codemirror/codemirror.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./_framework/plugins/js/codemirror/mode/javascript.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./_framework/plugins/js/viewport-units-buggyfill.min.js"
    ></script>

    <!-- main CSS  -->
    <link
      type="text/css"
      href="./_framework/css/OverlayScrollbars.css"
      rel="stylesheet"
    />
    <link
      type="text/css"
      href="etc/os-theme-minimal-dark.css"
      rel="stylesheet"
    />
    <link
      type="text/css"
      href="etc/os-theme-minimal-light.css"
      rel="stylesheet"
    />
    <link type="text/css" href="etc/os-theme-thin-dark.css" rel="stylesheet" />
    <link type="text/css" href="etc/os-theme-thin-light.css" rel="stylesheet" />
    <link type="text/css" href="etc/os-theme-thick-dark.css" rel="stylesheet" />
    <link
      type="text/css"
      href="etc/os-theme-thick-light.css"
      rel="stylesheet"
    />
    <link type="text/css" href="etc/os-theme-round-dark.css" rel="stylesheet" />
    <link
      type="text/css"
      href="etc/os-theme-round-light.css"
      rel="stylesheet"
    />
    <link type="text/css" href="etc/os-theme-block-dark.css" rel="stylesheet" />
    <link
      type="text/css"
      href="etc/os-theme-block-light.css"
      rel="stylesheet"
    />
    <link
      type="text/css"
      href="https://fonts.googleapis.com/css?family=Raleway:400,600,700"
      rel="stylesheet"
    />
    <link
      type="text/css"
      href="https://fonts.googleapis.com/css?family=Fira+Mono:400,500"
      rel="stylesheet"
    />
    <link type="text/css" href="styles.min.css" rel="stylesheet" />

    <!-- main JS -->
    <script type="text/javascript" src="./_framework/js/framework.js"></script>
    <script
      type="text/javascript"
      src="./_framework/js/OverlayScrollbars.js"
    ></script>
    <script type="text/javascript" src="index.dev.js"></script>
  </head>
  <body>
    <!--   
        <div id="div" class="os-host">
            <div class="os-resize-observer-host"></div>
            <div class="os-padding">
                <div class="os-viewport">
                    <div class="os-content">
                    </div>
                </div>
            </div>
            <div class="os-scrollbar os-scrollbar-horizontal ">
                <div class="os-scrollbar-track">
                    <div class="os-scrollbar-handle"></div>
                </div>
            </div>
            <div class="os-scrollbar os-scrollbar-vertical">
                <div class="os-scrollbar-track">
                    <div class="os-scrollbar-handle"></div>
                </div>
            </div>
            <div class="os-scrollbar-corner"></div>
        </div>


        <div class="os-host-textarea">
            <div class="os-resize-observer-host"></div>
            <div class="os-padding os-text-inherit">
                <div class="os-viewport os-text-inherit">
                    <div class="os-content os-text-inherit">
                        <div class="os-textarea-cover"></div>
                        <textarea id="text" class="os-textarea os-text-inherit"></textarea>
                    </div>
                </div>
            </div>
            <div class="os-scrollbar os-scrollbar-horizontal ">
                <div class="os-scrollbar-track">
                    <div class="os-scrollbar-handle"></div>
                </div>
            </div>
            <div class="os-scrollbar os-scrollbar-vertical">
                <div class="os-scrollbar-track">
                    <div class="os-scrollbar-handle"></div>
                </div>
            </div>
            <div class="os-scrollbar-corner"></div>
        </div>
    -->

    <div id="header">
      <div id="header-bg">
        <span class="header-bg-decoration"></span>
        <div class="header-bg-shining"></div>
        <span class="header-bg-decoration"></span>
      </div>

      <div class="container">
        <div class="header-content">
          <h1 class="header-content-plugin-name">Overlay Scrollbars</h1>
          <br />
          <h2 class="header-content-plugin-description">
            A javascript scrollbar plugin which hides native scrollbars,
            provides<br />custom styleable overlay scrollbars and keeps the
            native functionality and feeling.
          </h2>
          <br />
          <a
            href="https://github.com/KingSora/OverlayScrollbars/archive/master.zip"
            class="header-content-download"
          >
            Download
          </a>
        </div>
      </div>

      <svg
        id="header-edge"
        width="1920px"
        height="45px"
        viewBox="0 0 1920 45"
        enable-background="new 0 0 1920 45"
        xml:space="preserve"
        preserveAspectRatio="none"
      >
        <path
          fill="#FFFFFF"
          d="M960,44.5C592.556,44.5,127.279,11.928,0,0v44.5v37h1920v-37V0C1792.721,11.928,1327.444,44.5,960,44.5z"
        />
      </svg>
    </div>
    <div id="navigation">
      <div id="navigation-backdrop"></div>
      <div id="navigation-menu" class="container">
        <div class="navigation-menu-lr p-left"></div>
        <div class="navigation-menu-lr p-right">
          <div data-navigation="overview" class="navigation-menu-item">
            Overview
          </div>
          <div data-navigation="demos" class="navigation-menu-item">Demos</div>
          <div data-navigation="documentation" class="navigation-menu-item">
            Documentation
          </div>
          <div data-navigation="themes" class="navigation-menu-item">
            Themes
          </div>
          <div data-navigation="extensions" class="navigation-menu-item">
            Extensions
          </div>
          <div data-navigation="faq" class="navigation-menu-item">FAQ</div>
          <a
            href="https://github.com/KingSora/OverlayScrollbars"
            target="_blank"
            rel="noopener"
            class="navigation-menu-item"
            ><i class="mdi mdi-github-circle"></i
          ></a>
        </div>
      </div>
      <div class="container">
        <div id="navigation-button">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <svg
          id="navigation-logo"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          x="0px"
          y="0px"
          width="702px"
          height="468px"
          viewBox="0 0 702 468"
          enable-background="new 0 0 702 468"
          xml:space="preserve"
        >
          >
          <filter id="dropshadow" height="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="9" />
            <feOffset dx="0" dy="2" result="offsetblur" />
            <feComponentTransfer>
              <feFuncA type="linear" slope="0.11" />
            </feComponentTransfer>
            <feMerge>
              <feMergeNode />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
          <g id="Stroke" style="filter: url(#dropshadow)">
            <path
              fill="none"
              stroke="#fff"
              stroke-width="48"
              stroke-linecap="round"
              stroke-miterlimit="10"
              d="M234.014,337.502
                            c-9.188,0-18.292-1.193-27.057-3.545c-13.539-3.633-26.531-10.188-37.572-18.955c-10.933-8.682-20.222-19.736-26.863-31.969
                            c-6.813-12.549-11.024-26.725-12.18-40.996c-1.188-14.668,0.756-29.659,5.62-43.355c4.671-13.151,12.186-25.547,21.73-35.847
                            c9.515-10.269,21.266-18.694,33.982-24.368c13.146-5.865,27.781-8.966,42.325-8.966c3.586,0,7.203,0.184,10.75,0.547
                            c14.193,1.452,28.242,5.949,40.627,13.003c12.096,6.889,22.958,16.396,31.414,27.495c8.555,11.229,14.85,24.37,18.203,38.003
                            c3.509,14.265,3.951,29.467,1.278,43.964c-2.561,13.884-8.109,27.427-16.047,39.163c-7.806,11.541-18.112,21.643-29.805,29.211
                            c-11.912,7.709-25.592,12.986-39.562,15.258C245.323,337.045,239.656,337.502,234.014,337.502
                            C234.014,337.502,234.014,337.502,234.014,337.502z M570.998,338h-6.215h-26.65H500.59h-39.085h-31.278h-14.12
                            c-14.94,0-29.099,6.24-38.846,17.121c-12.376,13.813-16.449,33.305-10.63,50.865c6.084,18.361,22.291,32.152,41.292,35.137
                            c3.765,0.59,7.247,0.877,10.646,0.877h21.281h35.12h39.608h34.746h20.533c4.154,0,7.918-0.318,11.725-0.674
                            c11.898-1.107,23.729-4.436,35.166-9.893c21.475-10.246,38.934-27.695,49.156-49.133c10.625-22.271,12.957-47.695,6.57-71.588
                            c-6.066-22.697-19.951-42.912-39.094-56.922c-17.434-12.762-39.299-19.79-61.566-19.79h-19.836h-37.801h-34.63h-0.238
                            c-0.064,0-0.128,0-0.192,0c-7.594,0-14.766-0.01-20.863-1.207c-13.334-2.618-25.441-10.797-33.215-22.437
                            c-3.901-5.841-6.721-12.783-8.154-20.074c-1.492-7.591-0.939-15.579,1.642-23.742c4.497-14.223,14.729-25.905,28.074-32.053
                            c6.373-2.936,13.886-4.487,21.729-4.487h3.353h22.485h35.71h39.555h34.021h19.109c6.848,0,13.436-1.16,19.578-3.448
                            c16.672-6.206,29.244-20.975,32.814-38.542c3.609-17.757-2.477-36.397-15.879-48.646C649.65,30.746,637.154,26,623.891,26h-6.633
                            h-15.867h-23.605h-29.85h-34.594h-37.846h-39.599h-39.858h-38.619h-35.885h-31.655H263.95h-18.707h-9.988
                            c-13.158,0-23.905,0.728-33.822,2.288c-20.802,3.273-40.457,9.37-58.42,18.12c-18.023,8.778-34.679,20.118-49.506,33.705
                            c-14.775,13.541-27.499,29.094-37.814,46.228c-10.511,17.454-18.368,36.299-23.354,56.01c-5.159,20.397-7.188,41.485-6.027,62.679
                            c1.14,20.832,5.375,41.268,12.586,60.732c7.001,18.898,16.719,36.666,28.885,52.811c12.035,15.973,26.277,30.115,42.335,42.037
                            c16.245,12.059,34.087,21.652,53.04,28.514c19.537,7.074,39.766,11.68,60.63,12.662c3.03,0.145,6.092,0.215,9.211,0.215
                            c6.56,0,13.266-0.314,20.096-0.945c6.583-0.607,12.544-1.428,18.352-2.508c3.41-0.633,6.481-1.338,9.647-2.152"
            />
          </g>
        </svg>
      </div>
      <select id="navigation-content-navigation"></select>
    </div>
    <div id="content"></div>
    <div id="footer">
      <div class="container">
        <div id="footer-left" class="footer-content">
          Copyright © 2017-2019 <b>Rene Haas</b>. All rights reserved.
        </div>
        <div id="footer-right" class="footer-content"></div>
      </div>
    </div>
    <div id="loading">
      <div class="loading-inner">
        <div class="loading-circle-wrapper">
          <div class="loading-circle"></div>
        </div>
      </div>
    </div>

    <div id="modal-debug" class="modal" data-modal="debug" tabindex="-1">
      <div class="modal-window">
        <div class="modal-window-header">
          <span>Debug</span>
          <div class="modal-window-header-close">
            <i class="mdi mdi-window-close"></i>
          </div>
        </div>
        <div class="modal-window-content container">
          <pre
            id="modal-debug-content"
            class="content-navigation-sub-caption"
          ></pre>
        </div>
        <div class="modal-window-footer"></div>
      </div>
    </div>
  </body>
</html>
